<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柜子管理</title>
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css">
    <link rel="stylesheet" href="/css/demo.css">
</head>
<body class="page-no-scroll">
<div class="layui-container">
    <div class="layui-main">

        <div class="page-wrapper" style="margin-top: 20px">
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="addStation" class="layui-btn layui-btn-sm">添加部门</button>
                <button id="addCabinet" class="layui-btn layui-btn-sm">添加柜子</button>
                <button id="addChest" class="layui-btn layui-btn-sm">添加箱子</button>
                <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe668;</i>展开全部
                </button>
                <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe66b;</i>折叠全部
                </button>
            </div>
            <input class="layui-input" id="edtSearch" value="" placeholder="输入关键字"
                   style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe615;</i>搜索
                </button>
                <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#x1006;</i>清除搜索
                </button>
            </div>
        </div>
    </div>
</div>
<div style="margin: 5px 20px">

    <table id="demoTreeTable1"></table>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="TreeTableBar">
    <a class="layui-btn layui-btn-xs" lay-event="examine">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">编辑</a>
</script>

<!-- 表格状态列 -->
<script type="text/html" id="demoTreeTableState1">
    <input type="checkbox" id="ckStatus" lay-filter="ckStatus" value="{{d.id}}" lay-skin="switch"
           lay-text="归档|仓满" {{d.status}} readonly="true" disabled="disabled"/>
</script>

<div class="page-loading">
    <div class="ball-loader sm">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<script src="/lib/layui-v2.5.5/layui.js"></script>
<script>
    layui.config({
        base: './'
    }).extend({
        treeTable: '../../js/treeTable'
    }).use(['layer', 'util', 'treeTable', 'form'], function () {
        let $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            treeTable = layui.treeTable;

        // 渲染表格
        let insTb = treeTable.render({
            elem: '#demoTreeTable1',
            tree: {
                iconIndex: 1,
                arrowType: 'arrow2',
                isPidData: true,  // 是否是pid形式数据
                getIcon: function (d) {
                    if (d.type === 1) {
                        return '<img src="/images/station.png" width="20px">';
                    } else if (d.type === 2) {
                        return '<img src="/images/cabinet.png" width="20px">';
                    } else {
                        return '<i class="ew-tree-icon ew-tree-icon-file"></i>'
                    }
                }
            },
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                {type: 'numbers'},
                {field: 'name', title: '柜子信息', minWidth: 200},
                {field: 'libid', title: 'LibID', width: 90},
                {field: 'serial', title: '编号', width: 150},
                {field: 'intakemax', title: '最大容量', width: 100},
                {field: 'intakecur', title: '已用容量', width: 100},
                {field: 'updatetime', title: '更新时间', width: 240},
                {templet: '#demoTreeTableState1', title: '状态', width: 100},
                {align: 'center', toolbar: '#TreeTableBar', title: '操作', width: 160}
            ],
            reqData: function (data, callback) {
                setTimeout(function () {  // 故意延迟一下
                    $.get('/page/getTreeData', function (res) {
                        for (let i = 0; i < res.data.length; i++) {
                            res.data[i].updatetime=renderTime(res.data[i].updatetime);
                        }
                        callback(res.data);
                    });
                }, 100);
            },
            style: 'margin-top:0;'
        });

        function renderTime(date) {
            return new Date(+new Date(new Date(date).toJSON()) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        }

        //监听指定开关
        form.on('switch(ckStatus)', function (obj) {
            console.log(obj.value);
            //传一个开关状态 obj.elem.checked
            //传一个type ,1:地点 2:柜子 3:箱子
            /**
             * do ajax
             */
            //成功后刷新表格
            insTb.refresh();
            //根据开关id刷新
            let id = parseInt(obj.value);
            //刷新默认是全部不展开，所以在等刷新结束后再展开
            setTimeout(function () {
                insTb.expand(id);  // 展开指定节点
            }, 400);
        });

        treeTable.on('tool(demoTreeTable1)', function (obj) {
            let event = obj.event;
            let data = obj.data;
            console.log(obj.data);
            if (event === 'examine') {
                let type = null;
                if (data.type === 1)
                    type = "?stationid=" + data.id;
                else if(data.type === 2)
                    type = "?cabinetid=" + data.id;
                else
                    type = "?chestid=" + data.id;

                layer.open({
                    title: '查询档案',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: "/page/filesManage/fileManage" + type,
                });
            } else if (event === 'edit') {
                // obj.update({name: 'newname'});
                let url = null;
                if (data.type === 1)
                    url = "/page/cabinetManage/add?type=station&id=" + data.libid;
                else if(data.type === 2)
                    url = "/page/cabinetManage/add?type=cabinet&id=" + data.libid;
                else if(data.type === 3)
                    url = "/page/cabinetManage/add?type=chest&id=" + data.libid;
                else
                    url = "/page/filesManage/add?id=" + data.libid;

                layer.open({
                    title: '查询档案',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: url
                });
            }
            $(window).on("resize", function () {
                layer.close(layer.index);
                window.parent.location.reload();
            });
        });

        setTimeout(function () {
            $('body').children('.page-loading').hide();
            $('body').removeClass('page-no-scroll');
        }, 100);

        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });

        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });

        //添加地点
        $('#addStation').click(function () {
            layer.open({
                title: '添加部门',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['500px', '420px'],
                content: '/page/cabinetManage/add?type=station',
            });
            $(window).on("resize", function () {
                layer.close(layer.index);
                window.parent.location.reload();
            });
        });

        //添加柜子
        $('#addCabinet').click(function () {
            layer.open({
                title: '添加柜子',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['500px', '350px'],
                content: '/page/cabinetManage/add?type=cabinet',
            });
            $(window).on("resize", function () {
                layer.close(layer.index);
                window.parent.location.reload();
            });
        });

        //添加箱子
        $('#addChest').click(function () {
            layer.open({
                title: '添加箱子',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['500px', '500px'],
                content: '/page/cabinetManage/add?type=chest',
            });
            $(window).on("resize", function (index) {
                layui.layer.full(index);
            });
        });

        $('#btnSearch').click(function () {
            let keywords = $('#edtSearch').val();
            if (keywords) {
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        });

        $('#btnClearSearch').click(function () {
            insTb.clearFilter();
        });
    });
</script>
</body>
</html>